<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			一个重要的内置关系：
					1.VueComponent.prototype.__proto__ === Vue.prototype 
		 -->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			Vue.prototype.a = function(){console.log(8888)}

			//定义一个Person组件
			const Person = Vue.extend({
				name:'Person',
				template:`
					<div>
						<h1 @click="a">人员信息</h1>
						<h4>人的姓名：{{personName}}</h4>
						<h4>人的年龄：{{age}}</h4>
						<button @click="showPersonInfo">点我提示个人信息</button>	
					</div>
				`,
				data(){
					return{
						personName:'张三',
						age:18
					}
				},
				methods:{
					showPersonInfo(){
						// alert(`我叫${this.personName}，我今年${this.age}岁了`)
						console.log(this)
					}
				}
			})

			//创建vm
			let vm = new Vue({
				el:'#demo',
				components:{Person},
				template:'<Person/>'
			})
			

		</script>
	</body>
</html>